<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<image @click="back()" class="back" src="@/static/img/chat-09.png" mode="widthFix"></image>
				<view class="title">详情</view>
				<!-- <image @click="report()" class="report" src="@/static/img/report.png" mode="widthFix"></image> -->
			</view>
		</view>

		<view class="main">
			<view class="item">
				<view class="item_top">
					<!-- <image :src="info.avatar" mode="aspectFill"></image> -->
					<image :src="detailInfo.avatar" mode="aspectFill"></image>
					<view class="item_name">
						<p>{{ detailInfo.nikeName }}</p>
						<p>ID:{{ detailInfo.userId }}</p>
					</view>
					<view class="item_time">{{ detailInfo.createTime }}</view>
				</view>
				
				<view class="warp">{{ detailInfo.text }}</view>
				<view class="item_img" v-if="true">
					<view class="equall-img" v-for="itep in detailInfo.medias" @click="look(itep)">
						<image :src="itep" mode="aspectFill"></image>
					</view>
				</view>
				
				
			</view>
			
			<view class="like-box">
				<!-- #FC8925 -->
				<!--  v-else -->
				<uni-icons type="hand-up-filled" size="22" color="#666" @click="linkDynamic(detailInfo.id)" v-if="!isOwnLike"></uni-icons>
				<uni-icons type="hand-up-filled" size="22" color="#FC8925" @click="cancleLinkDynamic(detailInfo.id)" v-else></uni-icons>
				<view class="like-list">
					<text v-for="itex in detailInfo.likeVOList">{{ itex.nickName }}</text>
				</view>
			</view>	
			
			<view class="comment">
				<view class="title">
					<p>评论</p>
					<!-- detailInfo.commentVOList -->
					<!-- <p>{{ detailInfo.commentVOList.length }}条</p> -->
				</view>
				
				<view class="item" v-for="(item,i) in detailInfo.commentVOList">
					<view class="item_comments">
						<view class="comments-lt">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
						
						
						
						<view class="comments-rt">
							<view class="item_name">
								<view>{{item.nickName}}</view>
								<view>ID:{{item.userId}}</view>
							</view>
							<view class="comments-content">
								{{ item.content }}
							</view>
							
						</view>
						
						<!-- <image v-if="userInfo.id==info.userId" @click="delPopup(item.id)" class="del_icon" src="../../static/img/del.png" mode="heightFix"></image> -->
					</view>
					
					<view class="item_comm">
						<view>{{item.commentTime}}</view>
						<view>
							<text>{{item.up}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed_down item_bottom" v-if="this.$store.state.userStore.userInfo.id != detailInfo.userId">
				<!-- <view>
					<uni-icons @click="cancel(info.id,2,1)" v-if="true" type="heart-filled" size="26"
						color="#E83A3A"></uni-icons>
					<uni-icons @click="like(info.id,2,1)" v-else type="heart" size="26"></uni-icons>
					<text>12</text>
				</view> -->
				<view @click="gocomment" class="publish">
					<image src="../../static/img/comment.png" mode="aspectFill"></image>
					<text>评论</text>
				</view>
				<!-- <view>
					<uni-icons @click="cancel(info.id,1,1)" v-if="true" type="hand-up-filled" size="26"
						color="#FC8925"></uni-icons>
					<uni-icons @click="like(info.id,1,1)" v-else type="hand-up" size="26"></uni-icons>
					<text>45</text>
				</view> -->
				
			</view>
			<view class="comment_input" v-if="iskey" :style="{ bottom: inputBottom + 'px' }">
				<input type="text" confirm-type="send" :adjust-position='false'
					:focus='isfocus' @confirm="confirm" placeholder="友善评论 文明发言" v-model="content" @blur="iskey = false" @keyboardheightchange="onKeyboardheightchange">
			</view>
			<uni-popup ref="popup2" background-color="#fff">
				<view class="box theme-pop-bg">
					<view class="box_title">确认删除该评论吗？</view>
					<view class="box_btn">
						<view @click="close()" class="theme-c-btn">取消</view>
						<view @click="del()" class="theme-k-btn">确认</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="popup-title">温馨提示</view>
				<view class="popup-sub">确认举报该帖子吗？</view>
				<view class="popup-footer">
					<view class="cancle" @click="closePopup()">取消</view>
					<view class="confim" @click="confirmReport()">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" background-color="#fff">
			<view class="popup-box">
				<view class="popup-title">温馨提示</view>
				<view class="popup-sub">确认删除该评论吗？</view>
				<view class="popup-footer">
					<view class="cancle" @click="closePopup()">取消</view>
					<view class="confim" @click="del()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import navBarMixin from '@/mixin/navBarMixin.js'
	import { commentFriendCircleApi , getCirclyByIdApi , linkFriendCircleApi , cancelLikeApi} from '@/api/api.js'
	export default {
		data() {
			return {
				firendCirclId: '', // 朋友圈的id
				detailInfo: '',
				content: '',
				isfocus: false,
				iskey: false,
				isOwnLike: 0, // 本人是否点赞
				inputBottom: 0
			}
		},
		mixins: [navBarMixin],
		methods: {
			back() {
				uni.navigateBack()
			},
			report() {
				this.$refs.popup.open('center')
			},
			closePopup() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
			},
			confirmReport() {},
			async confirm() {
				console.log('发表评论')
				if(!this.content) {
					uni.showToast({
						title: '评论为空',
						icon: 'none'
					})
					return
				}
				
				const res = await commentFriendCircleApi({
					circleId: this.detailInfo.id,
					content: this.content,
					publishUserId: this.detailInfo.userId
				})
				
				if(!res.code) {
					this.loadDetails()
				}
				
			},
			
			
			async loadDetails() {
				const res = await getCirclyByIdApi(this.firendCirclId)
				if(!res.code) {
					this.detailInfo = res.data
					
					// this.detailInfo.
					console.log('id====',this.$store.state.userStore.userInfo.id)
					const OwnId = this.$store.state.userStore.userInfo.id
					
					this.isOwnLike = this.detailInfo.likeVOList.some(item => item.userId == OwnId)
					
					console.log('this.isOwnLike===',this.isOwnLike)
				}
				
			},
			
			onKeyboardheightchange(e) {
				console.log('e===',e)
				this.inputBottom = e.detail.height
			},
			
			// 点赞朋友圈
			async linkDynamic(id) {
				const res = await linkFriendCircleApi(id)
				if(!res.code) {
					this.loadDetails()
				}
			},
			
			// 取消点赞
			async cancleLinkDynamic(id) {
				const res = await cancelLikeApi(id)
				if(!res.code) {
					this.loadDetails()
				}
			},
			
			look(img) {
				const list = []
				list[0] = img
				uni.previewImage({
					// 预览功能图片也必须是数组的
					urls: list,
					showmenu: true,
					current: 0,
					success: function(res) {
						console.log(res);
					},
				})
			},
			
			gocomment() {
				console.log(this.keyboardHeight);
				this.iskey = true
				this.isfocus = true
			},
		},
		onLoad(options) {
			// this.detailInfo = JSON.parse(options.itemData)
			// console.log('options===',options.itemData)
			this.firendCirclId = options.itemData
			this.loadDetails()
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.wf-box {
		overflow: hidden;
		position: relative;
		min-height: 100vh;
		box-sizing: border-box;

		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				position: relative;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.back {
					width: 20rpx;
					position: absolute;
					left: 30rpx;
				}

				.report {
					width: 40rpx;
					position: absolute;
					right: 30rpx;
				}
			}
		}

		.main {
			margin-top: 30rpx;
			padding: 0 30rpx;
			padding-bottom: 136rpx;

			.comment {
				background-color: white;
				margin-top: 20rpx;
				padding-bottom: 50rpx;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eeeeee;
			}

			.title>p:nth-of-type(1) {
				font-size: 32rpx;
				font-weight: 500;
			}

			.title>p:nth-of-type(2) {
				font-size: 28rpx;
				color: #666666;
			}

			.item {
				background-color: white;
				// margin: 20rpx 0;
				padding: 0 30rpx 24rpx;
				margin-top: 20rpx;
			}
			
			.like-box {
				display: flex;
				padding: 20rpx 30rpx;
				margin-top: 20rpx;
				background: #fff;
				.like-list {
					flex: 1;
					margin-left: 20rpx;
				
					text {
						font-size: 28rpx;
						margin-right: 12rpx;
					}
				}
				
			}
			

			.comment .item {
				padding-bottom: 0;
				.item_comments {
					display: flex;
					.comments-lt {
						// flex: 1;
						image {
							display: block;
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}
					
					.comments-rt {
						flex: 1;
						.item_name {
							display: flex;
							align-items: center;
							view:first-child {
								color: #333;
								font-size: 26rpx;
							}
							view:last-child {
								margin-left: 14rpx;
								color: #999;
								font-size: 26rpx;
							}
						}
						.comments-content {
							margin-top: 10rpx;
							font-size: 24rpx;
						}
					}
				}
				
			}

			.item_top {
				display: flex;
				align-items: center;
			}

			.item_top image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.item_name {
				flex: 1;
			}

			.item_name>p:first-child {
				font-size: 30rpx;
				margin: 5rpx 0 14rpx 0;
			}

			.item_name>p:last-child {
				font-size: 26rpx;
				color: #999999;
			}

			.item_time {
				font-size: 24rpx;
				color: #999999;
			}

			.item_center>view {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
			}

			.warp {
				display: flex;
				font-size: 28rpx;
				margin-top: 20rpx;
				ine-height: 40rpx;
			}

			.item_img {
				display: flex;
				flex-wrap: wrap;
				margin-top: 5rpx;
				.equall-img {
					width: calc(100% / 3);
					margin-top: 15rpx;
					box-sizing: border-box;
					overflow: hidden;
					image {
						width: 210rpx;
						height: 198rpx;
						display: block;
						border-radius: 8rpx;
					}
					&:nth-child(3n - 1) {
						image {
							margin: 0 auto;
						}
					}
					&:nth-child(3n) {
						image {
							margin-left: auto;
						}
					}
				}
			}

			.item_img image {
				width: 100%;
				height: 198rpx;
				border-radius: 8rpx;
			}

			.item_img image:nth-of-type(2) {
				margin: 0 20rpx;
			}

			.item_comm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #666666;
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eeeeee;
				;
			}

			.item_comm>view:nth-of-type(1) {
				font-size: 24rpx;
				color: #999999;
			}

			.item_comm>view:nth-of-type(2) {
				display: flex;
				align-items: center;
				// line-height: 48rpx;
			}

			.item_comm image {
				width: 48rpx;
				height: 48rpx;
				margin: 0 10rpx 0 30rpx;
			}

			.item_comm text {
				display: inline-block;
			}

			.fixed_down {
				// width: calc(100vw - 60rpx);
				width: 100%;
				height: 106rpx;
				padding: 30rpx;
				background-color: white;
				position: fixed;
				bottom: 0;
				left: 0;
				// bottom: 0;
				box-sizing: border-box;
				box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(13, 25, 21, 0.05);
				
				.publish {
					display: flex;
					image {
						margin-right: 20rpx;
					}
					// align-items: center;
				}
			}

			.item_bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #666666;
			}

			.item_bottom view {
				display: flex;
				align-items: center;
			}

			.item_bottom image {
				width: 48rpx;
				height: 48rpx;
			}

			.comment_input {
				width: calc(100vw - 60rpx);
				background-color: white;
				position: fixed;
				// bottom: 30rpx;
				left: 0;
				display: flex;
				align-items: center;
				padding: 14rpx 30rpx;
				box-shadow: 0rpx -14rpx 10rpx 0rpx rgba(13, 25, 21, 0.05);

				input {
					flex: 1;
					height: 80rpx;
					// background-color: gold;
					font-size: 28rpx;
				}

				text {
					background-color: greenyellow;
				}
			}


			.del_icon {
				margin: 0 !important;
				height: 40rpx !important;
			}

		}

		.popup-box {
			width: 583rpx;
			// height: 630rpx;
			padding-bottom: 50rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			background: url('../../static/img/me-32.png') no-repeat;
			background-size: cover;
			overflow: hidden;

			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-top: 290rpx;
			}

			.popup-sub {
				margin-top: 46rpx;
				color: #666;
				font-size: 28rpx;
				text-align: center;
			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin: 72rpx 52rpx 0;

				.cancle {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
					color: #3F93FF;
				}

				.confim {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}
		}
	}
</style>